import React, {useState, useEffect } from 'react'
import '@/assets/scss/xyf/homeStatic.scss'
import HomeOne from '@/components/xyf/smallCom/HomeOne'
//首页数据请求
import homeAllData from '@/http/xyf/homeAllData'
import ChartLine from '@/components/xyf/smallCom/ChartLine'
import ChartZhu from '@/components/xyf/smallCom/ChartZhu'

export default function Homestatic() {
    const [allUser, setAllUser] = useState(0)
    const [addUser, setAddUser] = useState(0)
    const [allInvest, setAllInvest] = useState(0)
    const [addNewInvest, setAddNewInvest] = useState(0)
    const [allLend, setAllLend] = useState(0)
    const [newLend, setNewLend] = useState(0)
    const [allGet, setAllGet] = useState(0)
    const [addGet, setAddGet] = useState(0)
    const [progress, setProgress] = useState({"newPendingTrial": 0,
                                              "newPutaway": 0,
                                              "recheck": 0,
                                              "todayRepayment": 0,
                                              "cashPendingTrial": 0,
                                              "cashWaitDo": 0})
    useEffect(() => {
        homeAllData().then(res => { 
            setAllUser(res[0].data.allUser)
            setAddUser(res[0].data.addUser)
            setAllInvest(res[1].data.allInvest)
            setAddNewInvest(res[1].data.addNewInvest)
            setAllLend(res[2].data.allLend)
            setNewLend(res[2].data.newLend)
            setAllGet(res[3].data.allGet)
            setAddGet(res[3].data.addGet)
            setProgress(res[4].data)
        })
    }, [])
    return (
        <div className="home-one">
            {/* 数据查询 */}
            <div className="xyf-home-one">
                <HomeOne className="margin20"
                         top="注册用户(人)"
                         center={allUser}
                         bottom={'昨日新增: '+addUser+'人'}></HomeOne>
                <HomeOne className="margin20"
                         top="投资总额(万元)"
                         center={allInvest}
                         bottom={'昨日新增: '+addNewInvest+'万元'}></HomeOne>
                <HomeOne className="margin20"
                         top="借款总额(万元)"
                         center={allLend}
                         bottom={'昨日新增: '+newLend+'万元'}></HomeOne>
                <HomeOne className="margin20"
                         top="用户累计收益(万元)"
                         center={allGet}
                         bottom={'昨日累计新增: '+addGet+'万元'}></HomeOne>
            </div>
            {/* 待办事项 */}
            <div className="home-two">
                <div className="home-two-top">
                    <span>待办事项</span>
                </div>
                <div className="home-two-foot">
                    <div className="home-two-foot-com">
                        <p>新标待审</p>
                        <p className="num">{progress.newPendingTrial}</p>
                    </div>
                    <div className="home-two-foot-com">
                        <p>新标待上架</p>
                        <p className="num">{progress.newPutaway}</p>
                    </div>
                    <div className="home-two-foot-com">
                        <p>满标复审</p>
                        <p className="num">{progress.recheck}</p>
                    </div>
                    <div className="home-two-foot-com">
                        <p>今日待还款</p>
                        <p className="num">{progress.todayRepayment}</p>
                    </div>
                    <div className="home-two-foot-com">
                        <p>提现待审</p>
                        <p className="num">{progress.cashPendingTrial}</p>
                    </div>
                    <div className="home-two-foot-com">
                        <p>提现待处理</p>
                        <p className="num">{progress.cashWaitDo}</p>
                    </div>
                </div>
            </div>
            {/* 图表 */}
            <div className="home-three">
                {/* 线状图 */}
                <div className="home-three-line">
                    <div className="home-three-top">
                        <span>投资金额统计</span>
                    </div>
                    <div className="home-three-bottom">
                        <ChartLine />
                    </div>
                </div>
                {/* 柱状图 */}
                <div className="home-three-line">
                    <div className="home-three-top">
                        <span>近7天出入账统计</span>
                    </div>
                    <div className="home-three-bottom">
                        <ChartZhu />
                    </div>
                </div>
            </div>
        </div>
    )
}
